<template>
  <el-card class="myStaff-container">
    <el-table
      :data="myStaffList"
      height="700"
      v-loading="loading"
      :element-loading-text="loadingText"
    >
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click.native.prevent="delUser(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <template slot="empty">
        <el-empty :image-size="200" description="暂无我的组员"></el-empty>
      </template>
    </el-table>
  </el-card>
</template>

<script>
import { getMyStaffListApi, delUserApi } from '@/api/user'
export default {
  name: 'myStaff-page',
  data () {
    return {
      myStaffList: [],
      loading: false,
      loadingText: ''
    }
  },
  created () {
    this.getMyStaffList()
  },
  methods: {
    // 获取 我的组员 列表
    async getMyStaffList () {
      this.loading = true
      this.loadingText = '数据正在加载中!'
      const { data: res } = await getMyStaffListApi()
      // console.log('获取 我的组员 列表', res)
      this.myStaffList = [...res.data.group]
      this.loading = false
      this.loadingText = ''
    },
    // 删除用户
    async delUser (val) {
      this.userid = val.id
      this.$confirm('你确定要删除吗？', '温馨提示', { type: 'warning' })
        .then(async () => {
          this.loading = true
          this.loadingText = '正在删除用户!'
          await delUserApi(this.userid)
          this.$message({
            showClose: true,
            message: '删除成功!',
            type: 'success',
            duration: 1500
          })
          this.getMyStaffList()
          this.loading = false
          this.loadingText = ''
        })
        .catch(() => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.myStaff-container {
  box-sizing: border-box;
  height: 837px;
  padding: 25px 40px 0px;
}
</style>
